<template>
  <view>
    <u-sticky :offset-top="0">
      <!-- <view class="tabs-bar"> -->
      <u-tabs-swiper
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="changeTabs"
        active-color="#EA5646"
        inactive-color="#666666"
        font-size="28"
      ></u-tabs-swiper>
      <!-- </view> -->
    </u-sticky>
    <!--  -->
    <view class="message">
      <view
        class="message__item mt-20"
        v-for="item in getCurrentMessage(current)"
        :key="item.id"
        @click="handleDetail(item)"
      >
        <text
          :class="{ 'red-point': item.status === 0 }"
          class="message__title"
          >{{ item.title }}</text
        >
        <text class="message__content mt-40">{{ item.pushTime }}</text>
        <text class="message__content mt-20">{{ item.content }}</text>
      </view>
    </view>
    <view
      style="padding: 20rpx 0"
      v-show="getCurrentMessage(current).length > 10"
    >
      <u-loadmore :status="status" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    let list = [
      {
        name: "全部",
      },
      {
        name: "未读",
      },
      {
        name: "已读",
      },
    ];
    return {
      current: 0,
      status: "loadmore",
      list,
      allMessage: [], //所有
      alreadyRead: [], //已读
      unread: [], //未读
      allMessagePage: 1,
      alreadyReadPage: 1,
      unreadPage: 1,
    };
  },
  onReachBottom() {
    this.getMessages(this.current);
  },
  onShow() {
    this.init();
  },
  methods: {
    changeTabs(index) {
      this.current = index;
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    },
    init() {
      this.$zx.user_api
        .getMessages({
          page: 1,
          status: null,
        })
        .then((data) => {
          this.allMessage = data.records;
          this.allMessagePage = 2;
          // this.list[0].count = data.total;
          this.list[0].name = `全部(${data.total})`;
        });
      // 已读
      this.$zx.user_api
        .getMessages({
          page: 1,
          status: 1,
        })
        .then((data) => {
          this.alreadyRead = data.records;
          this.alreadyReadPage = 2;
          // this.list[2].count = data.total;
          this.list[2].name = `已读(${data.total})`;
        });
      // 未读
      this.$zx.user_api
        .getMessages({
          page: 1,
          status: 0,
        })
        .then((data) => {
          this.unread = data.records;
          this.unreadPage = 2;
          // this.list[1].count = data.total;
          this.list[1].name = `未读(${data.total})`;
        });
    },
    getMessages(type) {
      const _self = this;
      _self.status = "loading";
      switch (type) {
        case 0:
          this.$zx.user_api
            .getMessages({
              page: this.allMessagePage,
              status: null,
            })
            .then((data) => {
              _self.allMessage = _self.allMessage.concat(data.records);
              // 防止后台没有数据时,页数一直增加
              if (data.records.length !== 0) {
                _self.allMessagePage = _self.allMessagePage + 1;
              }
              // 更新总条数
              _self.list[0].count = data.total;
              //loading状态
              if (data.records.length < 10) {
                _self.status = "nomore";
              } else {
                _self.status = "loadmore";
              }
            });
          break;
        case 1:
          this.$zx.user_api
            .getMessages({
              page: _self.unreadPage,
              status: 0,
            })
            .then((data) => {
              _self.unread = _self.unread.concat(data.records);
              // 防止后台没有数据时,页数一直增加
              if (data.records.length !== 0) {
                _self.unreadPage = _self.unreadPage + 1;
              }
              // 更新总条数
              _self.list[1].count = data.total;
              // loading状态
              if (data.records.length < 10) {
                _self.status = "nomore";
              } else {
                _self.status = "loadmore";
              }
            });
          break;
        case 2:
          uni.$zx.user_api
            .getMessages({
              page: _self.alreadyReadPage,
              status: 1,
            })
            .then((data) => {
              _self.alreadyRead = _self.alreadyRead.concat(data.records);
              // 后台数据为0  不继续增加page
              if (data.records.length !== 0) {
                _self.alreadyReadPage = _self.alreadyReadPage + 1;
              }
              // 更新总条数
              _self.list[2].count = data.total;
              if (data.records.length < 10) {
                _self.status = "nomore";
              } else {
                _self.status = "loadmore";
              }
            });
          break;
        default:
          new Error(this.current);
      }
    },
    handleDetail(item) {
      const { status, projectId, id } = item;
      // if (status === 0) {
        // 标记已读
        this.$zx.user_api.updateMessageStatus(id, 1).then(() => {
          uni.navigateTo({
            url:
              "/pages/order/order-detail/order-detail?projectId=" + projectId,
          });
        });
      //   return;
      // }
      // 前往消息对应的订单
      // uni.navigateTo({
      //   url: "/pages/order/order-detail/order-detail",
      // });
    },
    getCurrentMessage(type) {
      switch (type) {
        case 0:
          return this.allMessage;
        case 1:
          return this.unread;
        case 2:
          return this.alreadyRead;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs-bar {
  height: 100rpx;
  // border-bottom: 1rpx solid $zx-border-color;
}

.message {
  padding: 0 16rpx;
  margin-top: 24rpx;

  &__item {
    width: 720rpx;
    padding: 28rpx 24rpx;
    background-color: #ffffff;
    border-radius: 12rpx;
  }

  &__title {
    font-size: 32rpx;
    font-weight: 500;
    color: $zx-main-color;
  }

  &__content {
    color: $zx-content-color;
    font-size: $zx-font-size-default;
    display: block;
  }
}

.red-point {
  display: flex;
  align-items: baseline;

  &::before {
    content: "";
    width: 24rpx;
    height: 24rpx;
    display: block;
    border-radius: 50%;
    background-color: $zx-theme-color;
    margin-right: 12rpx;
  }
}
</style>
